import './Message.css'
import { useState, useEffect,useContext } from 'react'
import axios from 'axios';
import {Link} from 'react-router-dom'
// 假设 `use` 对象包含了多个 `friends` 数组
let use = localStorage.getItem('use');
use = use ? JSON.parse(use) : []; 


// 选择有值的 friends 数组
let friends = use.firends;

export default function Message() {
    const [friendList, setFriendList] = useState(friends);
    let getfriendList = () => {
        // console.log(132312)
        axios.post('http://127.0.0.1:8000/getfirend', friendList).then(err => {
            setFriendList(err.data)
            let friend_messages = []

            err.data.forEach(item => {
                let obj = {
                    [item._id]: []
                };
                friend_messages.push(obj)
            })
            localStorage.setItem('friend_messages', JSON.stringify(friendList))
            // console.log(err.data)
        })
        // console.log(friendList)
    }

    useEffect(() => {
        getfriendList()
    }, [])
    return (
        <div className='Page'>
            <div className='top'>
                <div></div>
                <div className='top_middle'>
                    <span>聊天</span>
                    <span>列表</span>
                </div>
                <div className='top_add'><span>➕</span></div>
            </div>
            <div className='middle'>
                <div className='cate'>
                    <div>
                        <div className='cate_img'>
                            <img className='cate_Icon' src="https://cdn7.axureshop.com/demo2024/2309596/images/%E6%B6%88%E6%81%AF/u4248.svg" alt="描述性文字" />
                        </div>
                        <div className='cate_text'>通知</div>
                    </div>
                    <div>
                        <div className='cate_img'>
                            <img src='https://cdn7.axureshop.com/demo2024/2309596/images/%E6%B6%88%E6%81%AF/u4259.svg' />
                        </div>
                        <div className='cate_text'>粉丝</div>
                    </div>
                    <div>
                        <div className='cate_img'>
                            <img src='https://cdn7.axureshop.com/demo2024/2309596/images/%E6%B6%88%E6%81%AF/u4259.svg' />
                        </div>
                        <div className='cate_text'>评论</div>
                    </div>
                    <div>
                        <div className='cate_img'>
                            <img src='https://cdn7.axureshop.com/demo2024/2309596/images/%E6%B6%88%E6%81%AF/u4280.svg' />
                        </div>
                        <div className='cate_text'>点赞</div>
                    </div>
                </div>
                <div>
                    {friendList.map(item => {
                        return <Link to={`/chat?id=${item._id}`}> <div className='item'>
                            <div className='item_left'>
                                <img className='avatar' src={item.img_url} />
                            </div>
                            <div className='item_middle'>
                                <div className='item_name'>{item.name}</div>
                                <div className='item_message'>我是好人</div>
                            </div>
                            <div className='item_right'>
                                <div className='item_prompt'>14：23</div>
                                <div className='item_time'><div>14</div></div>
                            </div>
                        </div>
                        </Link>
                    })}
                </div>
            </div>
        </div>
    );
}
